<h6 class="info-item-title">Workflow Executions:</h6>

<span *ngIf="subWfExecutions && subWfExecutions.length === 0">
  <em>No child executions are associated with this task execution.</em>
</span>

<ngb-accordion [closeOthers]="false" (panelChange)="panelChanged($event)" *ngIf="subWfExecutions; else contentLoading">
  <ngb-panel *ngFor="let e of subWfExecutions; let i=index; trackBy: executionTrackBy" [id]="i">

    <ng-template ngbPanelTitle>
      <div class="d-flex align-items-center card-header-content">
        <div class="badge-flex">
          <div class="badge font-weight-normal" [ngClass]="e.state">{{e.state}}</div>
        </div>

        <div class="flex-1 text-ellipsis">
          {{e.workflow_name}}
        </div>

        <button class="btn btn-light mr-1 pointer" (click)="goToExecution($event, e.id)" title="Go to this Workflow Execution">
          <i class="fa fa-sitemap"></i>
        </button>
      </div>
    </ng-template>

    <ng-template ngbPanelContent>
      <!-- id -->
      <cf-info-item [prop]="{display: 'ID', value: e.id, key: 'e-'+i+'-id'}"></cf-info-item>

      <div class="d-flex flex-row">

        <!-- created -->
        <cf-info-item class="flex-1-1-auto" [prop]="{display: 'Created', value: e.created_at,
                                                     key: 'e-'+i+'-created'}"></cf-info-item>

        <!-- updated -->
        <cf-info-item class="flex-1-1-auto" [prop]="{display: 'Updated', value: e.updated_at,
                                                     key: 'e-'+i+'-updated'}"></cf-info-item>

      </div>

      <cf-info-item [prop]="{display: 'State Info', value: e.state_info, renderType: 'code',
                             key: 'e-'+i+'-state_info'}"></cf-info-item>

      <!-- input -->
      <cf-info-item [prop]="{display: 'Input', value: e.input, renderType: 'code',
                                                mode: 'json', key: 'e-'+i+'-input'}"></cf-info-item>

      <!-- output -->
      <cf-info-item [prop]="{display: 'Output', value: e.output, renderType: 'code',
                                                mode: 'json', key: 'e-'+i+'-output'}"></cf-info-item>
    </ng-template>

  </ngb-panel>
</ngb-accordion>

<ng-template #contentLoading>
  <div class="animated-background md"></div>
</ng-template>